<template>
	<view class="content">
		<u-navbar title="我的分享海报" titleColor="#fff" backIconColor="#fff" :background="navBg"></u-navbar>
		<view class="posters">
			<uni-grid :column="2" :showBorder="false" :square="false" @change="handleChange">
				<uni-grid-item v-for="(item, index) in list" :key="item._id" :index="index">
					<view class="posters-img">
						<image :src="item.url" mode="widthFix" class="h-fill"></image>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
	import {getPosterList} from "../../api/platform/user.js"
	export default {
		data() {
			return {
				navBg: {
					'background-image': 'linear-gradient(to right, #434AD8, #8E77F5)'
				},
				list: []
			}
		},
		onReady() {
			this.loadData();
		},
		async onPullDownRefresh() {
			await this.loadData();
			uni.stopPullDownRefresh();
		},
		methods: {
			async loadData() {
				try{
					this.list = await getPosterList();
				}catch(e){
					console.error("加载分享海报列表遇到错误", e);
				}
			},
			handleChange(e) {
				console.log("change", e);
				let token = uni.getStorageSync("token");
				let posterId = this.list[e.detail.index]._id;
				let url = `https://the3dspace-550c4c.service.tcloudbase.com/genSharePoster?token=${token}&posterId=${posterId}`;
				uni.previewImage({
					urls: [url]
				})
			}
		}
	}
</script>

<style lang="scss">
	.posters {
		padding: 10rpx;
		&-img {
			padding: 10rpx;
		}
	}
</style>
